<template>
  <div class="guanLi">
    <div class="cdtb" id="cdTb">
      <div class="main">
        <div class="tbT">
          <div class="tbt">
            <div class="tbt1"></div>
            <div class="tbt1"></div>
            <div class="tbt1"></div>
            <div class="tbt1"></div>
          </div>
        </div>
        <div class="table">
          <div class="thead">
            <div class="tr">
              <div class="th">编号</div>
              <div class="th">项目名称</div>
              <div class="th">位置</div>
              <div class="th">项目运行时间</div>
              <div class="th">操作</div>
            </div>
          </div>
          <div class="tbody" v-if="list.length > 0">
            <div v-for="(item , index) in list" :key="item.id" class="tr" :class="{ active: item.isChecked }">
              <div class="td">{{ index + 1 }}</div>
              <div class="td">{{ item.name }}</div>
              <div class="td">{{ item.location }}</div>
              <div class="td">{{ item.time }}</div>
              <div class="td"><button class="glbtn">监测点管理</button></div>
            </div>
            <div class="bottom">
              <a href="">《</a><em>1</em><a href="">》</a>
              <span>
                到第<input type="text">页<button class="tzbtn">确定</button>共1条
                <select>
              <option selected>10条/页</option>
              <option>20条/页</option>
              <option>30条/页</option>
              <option>40条/页</option>
              <option>50条/页</option>
              <option>60条/页</option>
              <option>70条/页</option>
              <option>80条/页</option>
              <option>90条/页</option>
              </select>
              </span>

            </div>

          </div>
          <div class="empty" v-else><div class="empty-">无数据</div></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
  return {
    list: [
      {
        name: "河南四维远见试点项目",
        location: "郑州",
        time: "8天",
        num: 1
       }
    ]
  }
}
}
</script>

<style scoped>
.guanLi{
  top: 8.3vh;
  position:absolute;
  width: 100vw;
  height: 91.5vh;
  z-index: 100;
  background: url(/img/jiemian/bg.jpg);
  background-repeat: no-repeat;
  background-position: 0 -8.3vh;
  opacity: 0.9;
  font-size: 0.8vw;
  color: black;
}
.cdtb{
  margin-left: 1vw;
  margin-right: 1vw;
  width: 98vw;
  height: 83.25vh;
}
.tbT{
  display: flex;
  align-items: center;
  width: 100%;
  height: 5.3vh;
}
.tbt{
  display: flex;
  width: 8.4vw;
  height: 3.32vh;
  margin-left: 88vw;
}
.tbt1{
  width: 1.634vw;
  height: 3.32vh;
  background-color: #4a08e4;
  margin-left: 0.466vw;
}
.table{
  text-align: left;
  border-width: 1px;
  border-style: solid;
  border-color: #FFFFFF;
}
.th{
  width: 18vw;
  height: 3.6vh;
  margin: 0.53vh 0;
  color: #FFFFFF;
  font-size: 0.8vw;
  text-align: center;
}
.td{
  width: 18vw;
  height: 3.6vh;
  margin: 0.53vh 0;
  color: #FFFFFF;
  font-size: 0.8vw;
  text-align: center;
}
.tr{
  display: flex;
}
.glbtn{
  font-size: 0.8vw;
  background-color: #0fcce6;
}
.bottom{
  display: flex;
  align-items: center;
  width: 100%;
  height: 4.76vh;
  text-align: center;
}
a{
  width: 2.08vw;
  height: 2.75vh;
  font-size: 0.8vw;
  background-color: #066785;
}
em{
  width: 1.56vw;
  height: 2.75vh;
  font-size: 0.8vw;
  color: #FFFFFF;
}
span{
  width: 18vw;
  height: 2.75vh;
  font-size: 0.8vw;
}
input{
  width: 2.08vw;
  height: 2.75vh;
  margin: 0 0.52vw;
  font-size: 0.8vw;
}
.tzbtn{
  width: 2.08vw;
  height: 2.75vh;
  margin-left: 0.52vw;
  margin-right: 1vw;
  font-size: 0.8vw;
}
select{
  width: 3.9vw;
  height: 2.75vh;
  margin: 0 0.52vw;
  font-size: 0.8vw;
}
.empty{
  width: 100%;
  height: 25vh;
}
.empty-{
  margin-top: 12.5vh;
  color: #999999;
  text-align: center;
}
</style>
